<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="代码">
        <el-input v-model="searchFrom.tsCode" placeholder="code" :clearable="true" @change="searchStockList" />
      </el-form-item>
      <el-form-item label="名字">
        <el-input v-model="searchFrom.name" placeholder="code" :clearable="true" @change="searchStockList" />
      </el-form-item>
      <el-form-item label="close">
        <el-input v-model="searchFrom.close" placeholder="code" :clearable="true" @change="searchStockList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchStockList">查询</el-button>
        <el-button type="primary" @click="searcCollect('collect')">收藏</el-button>
        <el-button type="primary" @click="searcCollect('peakButton')">收藏</el-button>
        <el-button type="primary" @click="searcCollect('peakCenter')">收藏</el-button>
        <el-button type="primary" @click="searcCollect('peakStable')">收藏</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column label="代码" width="200">
        <template scope="scope">
          <el-link :underline="false" @click="openChart(scope.row.ts_code)">{{ scope.row.ts_code }}</el-link>
          <i v-if="scope.row.collect==0" class="el-icon-star-off" style="padding-left: 10px;" @click="collect(scope.row,1,'collect')" />
          <i v-if="scope.row.collect==1" class="el-icon-star-on" style="padding-left: 10px;" @click="collect(scope.row,0,'collect')" />
          <i v-if="scope.row.peak_button==0" class="el-icon-star-off" style="padding-left: 10px;" @click="collect(scope.row,1,'peakButton')" />
          <i v-if="scope.row.peak_button==1" class="el-icon-star-on" style="padding-left: 10px;" @click="collect(scope.row,0,'peakButton')" />
          <i v-if="scope.row.peak_center==0" class="el-icon-star-off" style="padding-left: 10px;" @click="collect(scope.row,1,'peakCenter')" />
          <i v-if="scope.row.peak_center==1" class="el-icon-star-on" style="padding-left: 10px;" @click="collect(scope.row,0,'peakCenter')" />
          <i v-if="scope.row.peak_stable==0" class="el-icon-star-off" style="padding-left: 10px;" @click="collect(scope.row,1,'peakStable')" />
          <i v-if="scope.row.peak_stable==1" class="el-icon-star-on" style="padding-left: 10px;" @click="collect(scope.row,0,'peakStable')" />
        </template>
      </el-table-column>
      <el-table-column label="名称" width="150" >
        <template scope="scope">
          <el-link :underline="false" @click="openChartMinute(scope.row.ts_code)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="close" label="Close" width="100" />
      <el-table-column prop="industry" label="类型" width="150" />
      <el-table-column label="日底部" width="150">
        <template scope="scope">
          <el-input
            v-if="scope.row.edit"
            v-model="scope.row.day_jetton"
            size="mini"
            @change="changeDayJetton(scope.$index,scope.row)"
            @blur="changeDayJetton(scope.$index,scope.row)"
          />
          <span v-else @click="editDayJetton(scope.$index,scope.row)">{{ scope.row.day_jetton }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="图形"
      :visible.sync="dialogTableVisible"
      :modal="false"
      @opened="openChartLine"
      width="90%"
    >
      <div id="dialog-chart" style="width:100%;height: 600px;" />
    </el-dialog>

    <el-dialog
      title="图形"
      :visible.sync="dialogVisible"
      :modal="false"
      @opened="chartMinute"
      width="40%"
      height="20%"
    >
      <div id="dialog-chart-minute" style="width:100%;height: 500px;" />
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import echarts from 'echarts'

export default {
  name: 'StockList',
  data() {
    return {
      tableData: [],
      total: 0,
      dialogTableVisible: false,
      dialogVisible: false,
      searchFrom: {
        tsCode: '',
        page: 1,
        pageSize: 10,
        collect: 0,
        type: '',
        close:100,
        name:"",
      },
      chart: null,
      chartTsCode: ''
    }
  },
  computed: {

  },
  created() {
    this.stockList()
  },
  methods: {
    stockList() {
      axios.get('/tushare/stockList', {
        params: {
          page: this.searchFrom.page,
          pageSize: this.searchFrom.pageSize,
          tsCode: this.searchFrom.tsCode,
          collect: this.searchFrom.collect,
          type: this.searchFrom.type,
          close:this.searchFrom.close,
          name:this.searchFrom.name,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.tableData = response.data.data
            this.total = response.data.count
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    searchStockList() {
      this.searchFrom.page = 1
      this.searchFrom.collect = 0
      this.stockList()
    },
    searcCollect(type) {
      this.searchFrom.page = 1
      this.searchFrom.collect = 1
      this.searchFrom.type = type
      this.stockList()
    },
    editDayJetton(index, row) {
      this.$set(row, 'edit', true)
    },
    changeDayJetton(index, row) {
      if (row.day_jetton == '' || row.day_jetton == undefined) {
        return
      }
      this.$set(row, 'edit', false)
      axios.post('/tushare/updateDayJetton', qs.stringify({
        tsCode: row.ts_code,
        dayJetton: row.day_jetton
      }))
        .then(function(response) {
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleCurrentChange(val) {
      this.searchFrom.page = val
      this.stockList()
    },
    collect(row, val, type) {
      axios.get('/tushare/collect', {
        params: {
          tsCode: row.ts_code,
          collect: val,
          type: type
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            if (type == 'collect') {
              this.$set(row, 'collect', val)
            }
            if (type == 'peakButton') {
              this.$set(row, 'peak_button', val)
            }
            if (type == 'peakCenter') {
              this.$set(row, 'peak_center', val)
            }
            if (type == 'peakStable') {
              this.$set(row, 'peak_stable', val)
            }
          }
        })
        .catch(function(error) {

        })
    },
    openChart(tsCode) {
      this.dialogTableVisible = true
      this.chartTsCode = tsCode
    },
    openChartMinute(tsCode){
      this.dialogVisible = true
      this.chartTsCode = tsCode
    },
    closeChart() {
      this.dialogTableVisible = false
    },
    openChartLine() {
      let that = this;
      axios.get('/tushare/getDaily', {
        params: {
          tsCode: this.chartTsCode
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            let chart = echarts.init(document.getElementById('dialog-chart'))
            chart.off('click')
            var option

            option = {
              tooltip: {
                trigger: 'axis',
                position: function(pt) {
                  return [pt[0], '10%']
                }
              },
              title: {
                left: 'center',
                text: 'Large Area Chart'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                max:function (value) {
                  return value.max;
                },
                min:function (value) {
                  return value.min;
                },
              },
              dataZoom: [
                {
                  type: 'inside',
                  start: 0,
                  end: 100
                },
                {
                  start: 0,
                  end: 100
                }
              ],
              series: [
                {
                  name: 'Fake Data',
                  type: 'line',
                  sampling: 'lttb',
                  data: []
                }
              ]
            }

            const data = response.data.data
            for (var i in data) {
              option['series'][0]['data'].push(data[i]['close'])
              option['xAxis']['data'].push(data[i]['trade_date'])
            }

            chart.setOption(option)
            chart.on('click', function(params) {

              axios.get('/tushare/elgVol', {
                params: {
                  tsCode: that.chartTsCode,
                  tradeDate:params.name,
                  limit:1,
                }
              }).then((response) => {
                if(response.data.code == 0){
                  let buy = response.data.data.buy
                  let sell = response.data.data.sell
                  let jf = response.data.data.jf
                  let cf = response.data.data.cf

                  let buy_sm = response.data.data.buy_sm
                  let sell_sm = response.data.data.sell_sm
                  let jf_sm = response.data.data.jf_sm
                  let cf_sm = response.data.data.cf_sm

                  let buy_md = response.data.data.buy_md
                  let sell_md = response.data.data.sell_md
                  let jf_md = response.data.data.jf_md
                  let cf_md = response.data.data.cf_md

                  let buy_lg = response.data.data.buy_lg
                  let sell_lg = response.data.data.sell_lg
                  let jf_lg = response.data.data.jf_lg
                  let cf_lg = response.data.data.cf_lg

                  let html = "buy:"+buy+" sell:"+sell+" jf:"+jf+" cf:"+cf+"<br/><br/>";
                  html += "buySm:"+buy_sm+" sellSm:"+sell_sm+" jfSm:"+jf_sm+" cfSm:"+cf_sm+"<br/><br/>";
                  html += "buyMd:"+buy_md+" sellMd:"+sell_md+" jfMd:"+jf_md+" cfMd:"+cf_md+"<br/><br/>";
                  html += "buyLg:"+buy_lg+" sellLg:"+sell_lg+" jfLg:"+jf_lg+" cfLg:"+cf_lg+"<br/><br/>";
                  that.$message({
                    duration:0,
                    showClose: true,
                    message: html,
                    dangerouslyUseHTMLString:true,
                  });
                }
              })

            });
          }
        })
        .catch(function(error) {

        })
    },
    chartMinute(){
      let tsCode = this.chartTsCode.split(".")
      axios.get('/tushare/minuteLine', {
        params: {
          tsCode: tsCode[1]+tsCode[0]
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.chart = echarts.init(document.getElementById('dialog-chart-minute'))
            var option

            option = {
              tooltip: {
                trigger: 'axis',
                position: function(pt) {
                  return [pt[0], '10%']
                }
              },
              title: {
                left: 'center',
                text: 'Large Area Chart'
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],
                axisLabel:{
                  interval:59
                }
              },
              yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                max:function (value) {
                  return value.max;
                },
                min:function (value) {
                  return value.min;
                },
              },
              dataZoom: [
                {
                  type: 'inside',
                  start: 0,
                  end: 100
                },
                {
                  start: 0,
                  end: 100
                }
              ],
              series: [
                {
                  name: 'Fake Data',
                  type: 'line',
                  symbol: 'none',
                  sampling: 'lttb',
                  data: []
                }
              ]
            }

            const data = response.data.data.Data.Items
            let timestamp = 0;
            let ic = data.length;
            for (var i in data) {
              option['series'][0]['data'].push(data[i]['current'])
              option['xAxis']['data'].push(this.formatDate(data[i]['timestamp']))
              timestamp = data[i]['timestamp']
            }
            for (var i = data.length+1;i<=242;i++){
              if (ic <= 120 ){
                if (i == 121){
                  timestamp += 90 *60000;
                }else {
                  timestamp += 60000;
                }
              }else if (ic > 120){
                timestamp += 60000;
              }
              let fdate = this.formatDate(timestamp)
              option['xAxis']['data'].push(fdate)

            }
            this.chart.setOption(option)
          }
        })
        .catch(function(error) {

        })
    },
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return  h + ':' + m ;
    }
  }
}
</script>

<style scoped>

</style>
